<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,
        ul,
        li,
        p {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
            /*border: 1px solid #000;*/
        }

        .warp {
            width: 960px;
            margin: 0 auto;
        }

        .title {
            text-align: center;
        }

        .Garea {
            border: 1px solid #000;
            width: 300px;
            height: 550px;
            margin: 0 auto;
        }

        .Garea li {
            height: 90px;
        }

        .Garea li p {
            float: left;
            width: 73px;
            height: 100%;
            border: 1px #c9c9c9 solid;
        }

        .black {
            background-color: #000;
        }
		</style>
	</head>
	<body>
		<div class="warp">
	        <div class="title">
	            <h3>别踩白块</h3>
	            <p class="maxScore"></p>
	        </div>
	        <ul class="Garea">
	        </ul>
	    </div>
	    
	    <script src="../jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
	    <script type="text/javascript">
	    init(); // 初始化页面黑白块

        function init() {
            localStorage.setItem('score', '0'); // 初始化当前得分

            var html = ''
            for (let i = 0; i < 6; i++) {
            	//6行
                html += '<li>';
                //生成1-3之间的随机数
                var random = Math.floor(Math.random() * 3 + 1);
                console.log(random);
                //每行4块,根据随机数变成黑块
                for (let j = 0; j < 4; j++) {
                    var black = "";
                    if (j == random) { black = "black" };
                    html += '<p class="' + black + '" onclick="cai(this);"></p>';
                }
                html += '</li>';
            }
             //往ul的最前面追加元素
            $("ul").prepend(html)
            if (localStorage.getItem('maxScore')) {
                $('.maxScore').html('历史最高分为：' + localStorage.getItem('maxScore'))
            }
        }
        function cai(obj) {
            //判断是否点击最后一行
            if ($(obj).parent().index() != '5') {
            	console.log(1);
                return false;
            }

            //判断是否踩到白块
            if (obj.className == "") {
                if (localStorage.getItem('score') > localStorage.getItem('maxScore') - 1) {
                    alert("游戏结束 你的得分是 " + localStorage.getItem('score'));
                } else {
                    alert("游戏结束 你的得分是 " + localStorage.getItem('score'));
                }
                $('.maxScore').html('历史最高分为：' + localStorage.getItem('maxScore'))
                localStorage.setItem('score', '0')
                //游戏结束！
            } else {
                //游戏继续
                $(obj).parent().remove();
                var p = "";
                var random = Math.floor(Math.random() * 4 + 1);
                for (var i = 4; i >= 1; i--) {
                    var black = "";
                    if (i == random) { black = "black" };
                    p += '<p class="' + black + '" onclick="cai(this);"></p>';
                };

                var html = '<li>' + p + '</li>'
                //往ul的最前面追加元素
                $("ul").prepend(html);

                if (!localStorage.getItem('maxScore')) {
                    localStorage.setItem('maxScore', '0');
                }

                if (localStorage.getItem('score')) {
                    localStorage.setItem('score', localStorage.getItem('score') * 1 + 1)
                    if (localStorage.getItem('score') * 1 > localStorage.getItem('maxScore') * 1) {
                        localStorage.setItem('maxScore', localStorage.getItem('score') * 1)
                    }
                }
            }
        };
	    </script>
	</body>
</html>
